<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-8">
        <el-tabs v-model="activeName">
          <el-tab-pane label="主导业务" name="self">
            <div class="row d-flex">
              <div class="col" v-for="menu in menuSelf" :key="menu.title">
                <menu-card :menu="menu"></menu-card>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="推送业务(出具联保函配合对应联保机构的主导业务)" name="union">
            <div class="row d-flex">
              <div class="col" v-for="menu in menuUnion" :key="menu.title">
                <menu-card :menu="menu"></menu-card>
              </div>
              <div class="col"></div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="col-4">
        <menu-list></menu-list>
      </div>
    </div>
  </div>
</template>

<script>
import MenuCard from '@/credit/views/city/bus/index/MenuCard.vue'
import MenuList from '@/credit/views/city/bus/index/MenuList'
import { mapGetters } from 'vuex'

export default {
  components: {
    MenuList,
    MenuCard,
  },
  data() {
    return {
      activeName: 'self',
      menuUnion: [
        {
          title: '常规28业务',
          desc: '业务简介',
          icon: 'fa fa-leaf',
          iconColor: '#F97F51',
          route: {
            path: '/credit/task/union/routine',
          },
        },
      ],
      menuSelf: [
        {
          title: '常规业务',
          desc: '直担业务',
          icon: 'fa fa-tint',
          iconColor: '#55E6C1',
          route: {
            path: '/credit/task/self/routine/item',
          },
        },
        {
          title: '快捷业务',
          desc: '直担业务',
          icon: 'fa fa-paper-plane',
          iconColor: '#25CCF7',
          route: {
            path: '/credit/task/self/fast/item',
          },
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  created() {},
  methods: {},
}
</script>
<style lang="scss" scoped></style>
